<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 500px;"></div>
		<script type="text/javascript">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option = {
				title: {
					text: '搜索引擎'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [{
					name: '搜索引擎',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold',
						}
					},
					labelLine: {
						show: true
					},
					data: [{
							value: 1048,
							name: '百度'
						},
						{
							value: 735,
							name: '360'
						},
						{
							value: 580,
							name: '谷歌'
						},
						{
							value: 484,
							name: '搜狐'
						},
						{
							value: 300,
							name: 'IE'
						}
					]
				}]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
